<template>
  <view class="clone">
    <image :src="imageUrl + '/tesewuchan/tesewuchanbeijingditu.png'" class="clone-image"></image>
    <view class="nav-container">
      <image :src="imageUrl + '/Group-1490.png'" class="icon" @click="sosuo"/>
      <view class="tab" v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" v-if="index < tabs.length - 1">
        <text>{{tab.name}}</text>
      </view>
      <view class="underline"></view>
      <text class="tab">全部</text>
    </view>
	<view class="uni-margin-wrap">
	<z-swiper v-model="list" :options="options">
		<z-swiper-item :custom-style="{width:'296.76rpx',height:'265.33rpx'}" v-for="(item,index) in list"
			:key="index">
			<image class="image" :src="item" mode="aspectFill">
			</image>
		</z-swiper-item>
	</z-swiper>
	</view>
	<image :src="imageUrl + '/images2/fanhuiolan.png'" class="fahui" @click="fahui123"></image>
	<image :src="imageUrl + '/images2/dingbuzhezhao.png'" class="lantina"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
	imageUrl: this.$imageUrl,
	options: {
		effect: 'coverflow',
		centeredSlides: true,
		slidesPerView: 'auto',
		coverflowEffect: {
			rotate: 0,
			stretch: -20,
			depth: 100,
			modifier: 1,
			slideShadows: true,
		},
		loop:true,
	},
	list: [
		'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/Group-14901.png',
		'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/Group-14901.png',
		'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/Group-14901.png',
	],
      tabs: [
        { name: '精选' },
        { name: '周边' },
        { name: '耕读古镇' },
        { name: '全部' }
      ],
      selectedTab: 0,
    };
  },
  methods: {
    selectTab(index) {
      this.selectedTab = index;
    },
	sosuo(){
		wx.redirectTo({
			url: '/pagesNew/pages/sosuo/sosuo'
		})
	},
	fahui123(){
		wx.redirectTo({
			url: '/pagesNew/pages-special-local/pages-special-products/tea-drink'
		})
	}
  }
};
</script>
<style>
.uni-margin-wrap {
		width: 100vw;
		margin-top: 5px;
	}
.clone{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
}
.clone-image{
	position: absolute;
	z-index: -1;
	width: 100vw;
	height: 100vh;
}
.nav-container {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 115.77rpx;
  background-color: rgba(128, 128, 128, 0.5);
  margin-top: 85vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tab {
  width: auto;
  height: auto;
  padding: 10rpx 20rpx;
  border-bottom: 2rpx solid transparent;
  cursor: pointer;
  font-size: 32rpx;
  line-height: 38rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  background-clip: text;
 -webkit-background-clip: text;
 background-image: linear-gradient(to bottom, #F7EDC4 100%, #FFFFFF 100%);
  -webkit-text-fill-color: transparent;
}
.tab.active {
  border-bottom-color: blue;
}
.icon {
  width: 31.63rpx;
  height: 32.37rpx;
 padding-left: 40rpx;
}
.underline {
 width: 0rpx;
 height: 115rpx;
 border-radius: 0rpx 0rpx 0rpx 0rpx;
 border: 2rpx solid rgba(247,237,196,0.4);
}
.image {
	height: 100%;
	width: 100%;
}
.swiper{
	position: absolute;
	z-index: 3;
	margin-top: 65vh;
	width: 100vw;
}
.fahui{
	position: absolute;
	z-index: 3;
	width: 38rpx;
	height: 38rpx;
	margin-top: 20%;
	margin-left: 5%;
}
.lantina{
	position: absolute;
	z-index: 1;
	width: 100vw;
	height: 525.95rpx;
}
</style>